Vue Js update dyanamically text content of an element: In Vue.js, the v-text directive is used to update the text content of an element. It can be used as an alternative to double curly brace notation ({{ }}) to bind data to the text content of an element.Here in this tutorial we will learn how to change text content dynamicallly.
For example, if you have a data property called message and you want to display its value in a <p> element, you can use v-text like this:
Vue Js Dynamically change element value
<div id="app">
<p v-text="message"></p>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
message: 'font awesome icons'
}
}
});
</script>
Output of above example
This will bind the value of the message data property to the text content of the <p> element, and update it automatically whenever the value of message changes.
This is equivalent to using double curly brace notation:
Vue Js change element value using double curly brace notation
<div id="app">
<p>{{message}}</p>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
message: 'fontawesomeicons'
}
}
});
</script>
Output of above example
Both v-text and double curly brace notation are used to bind data to the text content of an element, but v-text is a more explicit way to do it and it is recommended to use this directive over double curly brace notation when you want to update the text content of an element.
